<template>
    <div class="wrapper">
        <div class="header">
            <div class="header-item">
                <div class="secting">
                    <div class="circle"><img @click="$router.push('/info')" style="width:71px;height:71px"
                            :src="userData.avatar" alt /></div>
                    <div @click="$router.push('/info')" class="secting-item">
                        <p style="margin:0 10px 0 0;font-size: 24px;">{{userData.nickname}}</p>
                        <img style="width:21px;height:21px" src="/img/1.png" alt />
                    </div>
                    <div @click="aa = !aa" style="width:79px">.</div>
                    <span @click="$router.push('/oto')">去约课</span>
                </div>
                <div class="mine">
                    <div class="mine-item" @click="$router.push('/my-study')">
                        <p class="mine-item-cent1">{{userData.courses || 0}}</p>
                        <p class="mine-item-cent2">我的特色课</p>
                        <p class="mine-item-cent3">已购特色课程的学习</p>
                    </div>
                    <div class="mine-item" @click="$router.push('/record')">
                        <p class="mine-item-cent1">{{userData.oto || 0}}</p>
                        <p class="mine-item-cent2">一对一辅导</p>
                        <p class="mine-item-cent3">我的一对一老师辅导</p>
                    </div>
                    <div class="mine-item" @click="$router.push('/my-currency')">
                        <p class="mine-item-cent1">{{userData.integral || 0}}.00</p>
                        <p class="mine-item-cent2">剩余学习币</p>
                        <p class="mine-item-cent3">查看剩余学习币</p>
                    </div>
                </div>
            </div>
        </div>
        <div @click="show = true" class="navc">
            <img style="width:28px;height:28px" src="/img/2.png" alt />
            <div class="navc-item">
                <p>邀请好友注册APP，享多重好礼</p>
                <p>限时特惠，多邀多得</p>
            </div>
            <van-icon size="26px" color="#fff" name="arrow" />
        </div>
        <div class="menu-box">
            <div class="menu-box-item" v-for="(item,index) in listData" :key="index">
                <p class="menu-box-title">{{item.title}}</p>
                <div class="menu-item">
                    <div @click="ction(item2.path)" v-for="(item2,index2) in item.list" :key="index2">
                        <img style="width:28px;height:28px" :src="item2.img" alt />
                        <p style="font-size:18px">{{item2.text}}</p>
                    </div>
                </div>
            </div>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper2"></div>
        </van-overlay>
        <div v-if="aa" class="posi">
            <img :src="userData.avatar" alt />
        </div>
    </div>
</template>
  
<script>
import { getUserPort } from '@/api/main'
export default {
    data() {
        return {
            aa: false,
            userData: [],
            show: false,
            listData: [
                {
                    title: '课程相关',
                    list: [
                        { img: '/img/l-01.png', text: '关注的老师', id: '1', path: '/concern' },
                        { img: '/img/l-02.png', text: '我的收藏', id: '2', path: '/setpass' }
                    ]
                },
                {
                    title: '订单相关',
                    list: [
                        { img: '/img/l-03.png', text: '课程订单', id: '3', path: '/setpass' },
                        { img: '/img/l-04.png', text: '会员订单', id: '4', path: '/setpass' },
                        { img: '/img/l-05.png', text: '约课订单', id: '5', path: '/setpass' }
                    ]
                },
                {
                    title: '我的账户',
                    list: [
                        { img: '/img/l-06.png', text: '优惠券', id: '6', path: '/setpass' },
                        { img: '/img/l-07.png', text: '学习卡', id: '7', path: '/setpass' },
                        { img: '/img/l-08.png', text: '会员', id: '8', path: '/setpass' }
                    ]
                },
                {
                    title: '自助服务',
                    list: [
                        { img: '/img/l-09.png', text: '我的消息', id: '9', path: '/setpass' },
                        { img: '/img/l-10.png', text: '意见反馈', id: '10', path: '/setpass' },
                        { img: '/img/l-11.png', text: '在线客服', id: '11', path: '/setpass' },
                        { img: '/img/l-12.png', text: '设置', id: '12', path: '/logout' }
                    ]
                }
            ]
        }
    },
    computed: {},
    created() { },
    mounted() {
        this.gettUser()
    },
    watch: {},
    methods: {
        //   获取用户信息
        async gettUser() {
            let res = await getUserPort()
            console.log(res)
            if (res.code == 200) {
                this.userData = res.data
            }
        },
        // 点击事件
        ction(v) {

            this.$router.push(v)

        }
    },
    components: {}
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    width: 750px;
    background: #fff;
    margin-bottom: 50px;

    .header {
        box-sizing: border-box;
        width: 750px;
        height: 313px;
        padding: 0 25px;
        position: relative;
        background: url('@/assets/theme-img/user_bg.png') 0 0/100% no-repeat;

        .header-item {
            width: 675px;
            height: 249px;
            background: #fff;
            border-radius: 8px;
            position: absolute;
            top: 60px;

            .secting {
                width: 675px;
                height: 115px;
                box-sizing: border-box;
                padding: 15px 0 0 21px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .circle {
                    width: 71px;
                    height: 71px;
                    border-radius: 50%;
                    border: 1px solid #999;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        border-radius: 50%;
                    }
                }

                .secting-item {
                    display: flex;
                }

                span {
                    width: 79px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    color: #fff;
                    background: #eb6100;
                    display: inline-block;
                    border-radius: 12px 0 0 12px;
                }
            }

            .mine {
                width: 675px;
                height: 131px;
                display: flex;
                justify-content: space-around;

                .mine-item {
                    width: 196px;
                    height: 131px;
                    display: flex;
                    flex-direction: column;
                    border: 1px solid #eee;
                    box-sizing: border-box;

                    .mine-item-cent1 {

                        width: 100%;
                        line-height: 61px;
                        text-align: center;
                        font-size: 27px;
                        color: #eb6100;
                    }

                    .mine-item-cent2 {
                        margin: 0;
                        width: 100%;
                        text-align: center;
                        font-size: 21px;
                    }

                    .mine-item-cent3 {
                        width: 100%;
                        line-height: 49px;
                        text-align: center;
                        font-size: 17px;
                        color: #999;
                    }
                }
            }
        }
    }

    .navc {
        width: 675px;
        height: 63px;
        margin: 15px 35px 0;
        background-image: linear-gradient(to right, #f5b65e, #eb7834);
        border-radius: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        .navc-item {
            width: 470px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 15px;
            line-height: 25px;

            p {
                margin: 0;
                color: #fff;
            }
        }
    }

    .menu-box {
        width: 100%;
        padding: 0 25px;
        box-sizing: border-box;

        .menu-box-item {
            width: 100%;
            height: 153px;
            // box-sizing: border-box;
            padding: 20px 0;
            border-bottom: 1px solid rgb(235, 230, 230);

            .menu-box-title {
                font-size: 23px;
                line-height: 40px;
            }

            .menu-item {
                width: 100%;
                // height: 60px;
                // padding: 10px;
                display: flex;
                align-items: center;

                div {
                    width: 168px;
                    height: 115px;
                    padding: 18px 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                }
            }
        }
    }
}

.wrapper2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

.posi {
    position: fixed;
    left: 0;
    top: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 375px;
    height: 375px;
    border-radius: 50%;

    img {
        border-radius: 50%;
        width: 80%;
        height: 80%;
    }
}
</style>
  